<template>
  <div class="app-container ">
  

        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane label="添加学校" name="first">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm ">
  <el-form-item label="学校名称" prop="name" class='form_body' >
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
    <el-form-item label="权重排序" prop="num" class='form_body' >
    <el-input v-model="ruleForm.num"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form> 
                 
                </el-tab-pane>
                <el-tab-pane label="管理学校" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="tableList"  class='schooltab'>
                           <el-table-column prop="school_name"  label="学校" width="220"></el-table-column>
                         <el-table-column label="更新时间"  width="130">
                              <template slot-scope="scope" >
           <span>{{scope.row.createtime|parseTime}}</span>
         </template>
                         </el-table-column>
                           
                            <el-table-column width="100" label="状态"  >
                              <template slot-scope="scope">
                        
                              <el-switch
                              @change="update_school(scope.row)"
                                v-model="scope.row.isshow==1?true:false"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                              </el-switch>
                    
                                 
                                </template> 
                            </el-table-column>
                                      <el-table-column width="130" label="排序"  >
                              <template slot-scope="scope">
                        
                         <el-input v-model="scope.row.num" ></el-input>
                    
                                 
                                </template> 
                            </el-table-column>
                             <el-table-column width="100" label="修改"  >
                                        <template slot-scope="scope">
                               <el-button size="small" type="primary" @click="changeNum(scope.row)">确认修改</el-button>
                                      </template> 
                                 </el-table-column>
                        </el-table>
                        <div class="handle-row">
                          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 100,]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
                        </div>
                    </template>
                </el-tab-pane>
               
            </el-tabs>
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'first',
      showHeader: false,
      tableList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      ruleForm: {
        name: '',
        num: ''
      },
      rules: {
        name: [
          {
            required: true,
            min: 2,
            max: 255,
            message: '请输入学校名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 255,
            message: '长度在 2 到 255 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.getSchool()
  },
  methods: {
    changeNum(e){
      console.log(e)
          let tempData = Object.assign({}, e)
       
        this.change_school(tempData);
    },
    getSchool() {
      var that = this
      const page = this.page
      const data = {
        page: page
      }
      that
        .$request({
          url: '/admin/get_school',
          method: 'post',
          data
        })
        .then(res => {
          this.listLoading = false
          if (res.code == 200) {
            that.total = res.count
            that.tableList = res.data
          }
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getSchool()
    },
    handleSetLineChartData() {

    },
    handleCurrentChange(val) {
      this.page = val

      this.getSchool()
    },
    update_school(e){
         let tempData = Object.assign({}, e)
        tempData.isshow=tempData.isshow==1?0:1;
        this.change_school(tempData);

    },
    change_school(data) {
      var that = this
      
      that
        .$request({
          url: '/admin/update_school',
          method: 'post',
          data
        })
        .then(res => {
          if (res.code == 200) {
            that.getSchool()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 900
            })
          }
        })
    },
    submitForm(formName) {
      var that = this

      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = {
            school_name: that.ruleForm.name
          }
          if(that.ruleForm.num!==''){
            data.num=that.ruleForm.num
          }
          that
            .$request({
              url: '/admin/add_school',
              method: 'post',
              data
            })
            .then(res => {
              if (res.code == 200) {
                that.$message({ message: '添加成功!', type: 'success' })
                that.ruleForm.name = ''
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style  rel="stylesheet/scss" lang="scss" scoped>
.form_body {
  width: 480px;
  height: auto;
}
.container {
    padding: 0px 20px 20px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  
    width: 100%;
    .message-title{
        cursor: pointer;
    }
    .handle-row{
        margin-top: 30px;
    }
}
.schooltab{
  width:800px;
  height:500px;
  overflow-y: scroll;
}
</style>
